<template>
  <div style="width: 50vw;height: 100vh; overflow: auto">
    <video
      v-for="(item, index) in currentList"
      id="myVideo"
      :key="index"
      ref="myVideo"
      class="video-js"
      style="width:100%; height: 100%;"
    >
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
          supports HTML5 video
        </a>
      </p>
    </video>
    <el-button @click="changeLive">点击切换</el-button>
  </div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
export default {
  data() {
    return {
      list: [
        'https://gcalic.v.myalicdn.com/gc/yxhcnh_1/index.m3u8?contentid=2820180516001',
        'https://gcalic.v.myalicdn.com/gc/yxxdpf_1/index.m3u8?contentid=2820180516001',
        'https://gcalic.v.myalicdn.com/gc/hspyt_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/hsmbsh_1/index.m3u8?contentid=2820180516001',
        //   中央一台直播链接
        'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
      ],
      currentList: [
        'https://gcalic.v.myalicdn.com/gc/yxxdpf_1/index.m3u8?contentid=2820180516001',
        // 直播链接
        'https://gcalic.v.myalicdn.com/gc/hspyt_1/index.m3u8?contentid=2820180516001',
        'https://gcalic.v.myalicdn.com/gc/zjjafdxfs_1/index.m3u8?contentid=2820180516001',
        'https://gcalic.v.myalicdn.com/gc/bssztt_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/yxlcyt_1/index.m3u8?contentid=2820180516001'
      ],
      instanceList: []
    }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    changeLive() {
      this.currentList = ['https://gcalic.v.myalicdn.com/gc/hspyt_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/hsmbsh_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/hsptgy_1/index.m3u8?contentid=2820180516001',
        'https://gcalic.v.myalicdn.com/gc/taishan02_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/fhgcdgm_1/index.m3u8?contentid=2820180516001'
      ]

      this.instanceList.forEach((item, index) => {
        item.src({
          src: this.currentList[index]
          // type: 'application/x-mpegURL'
        })
        //   开始播放
        item.play()
      })
    },
    initVideo() {
      //  初始化video.js直播
      this.currentList.forEach((item, index) => {
        this.instanceList.push(videojs(this.$refs.myVideo[index], {
          // 宽度
          width: 400,
          // autoplay含义：是否自动播放
          autoplay: true,
          // controls含义：是否显示控制条
          controls: true,
          // preload含义：是否预加载
          preload: 'auto',
          // fluid含义：自适应宽高
          fluid: true,
          // liveUi含义：直播UI
          liveui: true,
          // sources含义：视频源
          sources: [{
            // src含义：视频地址
            src: item
            // type: 'application/x-mpegURL'
          }]
        }))
      })
      //   初始化video.js直播
      this.currentList.forEach((item, index) => {
        this.instanceList.push(videojs(this.$refs.myVideo[index], {
          // 宽度
          width: 400,
          autoplay: true,
          controls: true,
          preload: 'auto',
          // fluid含义：自适应宽高
          fluid: true,
          // liveUi含义：直播UI
          liveui: true,
          sources: [{
            src: item
            // type: 'application/x-mpegURL'
          }]
        }))
      })
    }
  }
}
</script>
